<template>
  <div>
    <el-button
      type="primary"
      :icon="Plus"
      class="mb-10"
      @click="addSpu"
      :disabled="!categoryStore.category3Id"
      >添加属性
    </el-button>
    <el-table :data="spuList" border>
      <el-table-column
        label="序号"
        type="index"
        align="center"
        width="80"
      ></el-table-column>
      <el-table-column
        label="SPU名称"
        property="spuName"
        width="280"
      ></el-table-column>
      <el-table-column
        label="SPU描述"
        width="600"
        property="description"
      ></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row, $index }">
          <!--         @click="editAttr(row)"-->
          <el-button
            type="success"
            :icon="Plus"
            size="small"
            title="新增SKU"
          ></el-button>
          <el-button
            type="warning"
            :icon="Edit"
            size="small"
            title="修改SPU"
            @click="editSpu(row)"
          ></el-button>
          <el-button
            type="info"
            :icon="InfoFilled"
            size="small"
            title="查看SKU列表"
          ></el-button>
          <!--         @confirm="deleteAttr(row)"-->
          <el-popconfirm :title="`你确定删除[${row.attrName}]的属性名数据吗？`">
            <template #reference>
              <el-button
                type="danger"
                :icon="Delete"
                size="small"
                title="删除"
              ></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 18px"
      v-model:currentPage="page"
      v-model:page-size="limit"
      :page-sizes="[3, 6, 9]"
      layout=" prev, pager, next,jumper,->,sizes,total"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { Delete, Edit, Plus, InfoFilled } from "@element-plus/icons-vue";
import { ElMessage } from "element-plus";
import { useCategoryStore } from "@/stores/category";
import type { SpuListModel, SpuModel } from "@/api/spu";
import spuApi from "@/api/spu";
import { SPUSTATUS } from "@/views/product/spu/index.vue";
import { ref, watch } from "vue";

//拿到三级导航的数据
const categoryStore = useCategoryStore();
//接收父级传过来的数据和事件
const emits = defineEmits(["update:modelValue", "spuInfo"]);
//添加属性  进行页面的跳转
const addSpu = () => {
  emits("update:modelValue", SPUSTATUS.SPUFORM);
};
// 点击修改向父级传数据 进行回响
const editSpu = (row: SpuModel) => {
  emits("spuInfo", row);
  emits("update:modelValue", SPUSTATUS.SPUFORM);
};
//定义分页
const page = ref(1);
const limit = ref(3);
const total = ref(0);
//控制每页显示多少条数据
const handleSizeChange = async (val: number) => {
  //修改每页显示条数 重新发送请求调用getPage方法 修改一下
  limit.value = val;
  page.value = 1;
  await getPage();
};
//控制显示第几页
const handleCurrentChange = async (val: number) => {
  page.value = val;
  await getPage();
};
//定义表格数据
const spuList = ref<SpuListModel>();
const getPage = async () => {
  try {
    const result = await spuApi.getPage(
      page.value,
      limit.value,
      categoryStore.category3Id as number
    );
    spuList.value = result.records;
    total.value = result.total;
  } catch (e) {
    console.error(e);
    ElMessage.error("请求spu数据失败");
    return Promise.reject(e);
  }
};

//监听第三个Id
watch(
  () => categoryStore.category3Id,
  (newVal) => {
    if (!newVal) {
      spuList.value = [];
      return;
    }
    getPage();
  },
  { immediate: true }
);
</script>

<style scoped lang="css"></style>
